<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>sunJsona的个人博客</title>

  <!-- keywords -->
  

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="sunJsona的个人博客">
<meta property="og:url" content="https://xiaochangzai.github.io/page/2/index.html">
<meta property="og:site_name" content="sunJsona的个人博客">
<meta property="og:locale" content="Simple Chinese">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="sunJsona的个人博客">
  
    <link rel="alternative" href="/atom.xml" title="sunJsona的个人博客" type="application/atom+xml">
  
  
    <link rel="icon" href="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg">
  
  <link rel="stylesheet" href="/css/style.css">
  
  

  <script src="//cdn.bootcss.com/require.js/2.3.2/require.min.js"></script>
  <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

  
</head>
<body>
  <div id="container">
    <div id="particles-js"></div>
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			
			<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">sunJsona</a></h1>
		</hgroup>

		

		
			<div class="switch-btn">
				<div class="icon">
					<div class="icon-ctn">
						<div class="icon-wrap icon-house" data-idx="0">
							<div class="birdhouse"></div>
							<div class="birdhouse_holes"></div>
						</div>
						<div class="icon-wrap icon-ribbon hide" data-idx="1">
							<div class="ribbon"></div>
						</div>
						
						<div class="icon-wrap icon-link hide" data-idx="2">
							<div class="loopback_l"></div>
							<div class="loopback_r"></div>
						</div>
						
						
					</div>
					
				</div>
				<div class="tips-box hide">
					<div class="tips-arrow"></div>
					<ul class="tips-inner">
						<li>菜单</li>
						<li>标签</li>
						
						<li>友情链接</li>
						
						
					</ul>
				</div>
			</div>
		

		<div class="switch-area">
			<div class="switch-wrap">
				<section class="switch-part switch-part1">
					<nav class="header-menu">
						<ul>
						
							<li><a href="/">主页</a></li>
				        
							<li><a href="/archives">所有文章</a></li>
				        
						</ul>
					</nav>
					<nav class="header-nav">
						<div class="social">
							
						</div>
					</nav>
				</section>
				
				
				<section class="switch-part switch-part2">
					<div class="widget tagcloud" id="js-tagcloud">
						
					</div>
				</section>
				
				
				
				<section class="switch-part switch-part3">
					<div id="js-friends">
					
			          <a target="_blank" class="main-nav-link switch-friends-link" href="https://github.com/smackgg/hexo-theme-smackdown">smackdown</a>
			        
			        </div>
				</section>
				

				
			</div>
		</div>
	</header>				
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"></div>
  		<h1 class="header-author js-mobile-header hide">sunJsona</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">sunJsona</h1>
			</hgroup>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/archives">所有文章</a></li>
		        
		        <div class="clearfix"></div>
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
				</div>
			</nav>
		</header>				
	</div>
</nav>
      <div class="body-wrap">
  
    <article id="post-React 点击事件2" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/React 点击事件2/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/07/07/React 点击事件2/">
        React 点击事件2
        
      </a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <h5 id="1-this-state"><a href="#1-this-state" class="headerlink" title="1. this.state"></a>1. this.state</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">var LikeButton = React.createClass(&#123;</span><br><span class="line">  getInitialState:function()&#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      like:false</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  handleClick: function(event) &#123;</span><br><span class="line">    alert(556);</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">      like:!this.state.like</span><br><span class="line">    &#125;);</span><br><span class="line">    alert(this.state.like);</span><br><span class="line">  &#125;,</span><br><span class="line">  render: function() &#123;</span><br><span class="line">    var text = this.state.liked ? &apos;like&apos; : &apos;haven\&apos;t liked&apos;;</span><br><span class="line">    return (</span><br><span class="line">      &lt;p onClick=&#123;this.handleClick&#125;&gt;</span><br><span class="line">        &#123;this.state.like.toString()&#125;</span><br><span class="line">      &lt;/p&gt;</span><br><span class="line">      )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">ReactDOM.render(</span><br><span class="line">  &lt;LikeButton /&gt;,</span><br><span class="line">  document.getElementById(&apos;example&apos;)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<p>getInitialState 方法返回的是this.state，this.state 改变，DOM绑定的值也会变。</p>
<p>this.setState可以改变state的值。</p>
<h5 id="2-this-refs-ref"><a href="#2-this-refs-ref" class="headerlink" title="2. this.refs.ref"></a>2. this.refs.ref</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">var HelloMessage = React.createClass(&#123;</span><br><span class="line">    handleClick:function()&#123;</span><br><span class="line">        this.refs.myTextInput.focus();</span><br><span class="line">        this.refs.myTextInput.value = &quot;1234567&quot;;</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    render:function()&#123;</span><br><span class="line">        return	(</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">                &lt;input type=&quot;text&quot; ref=&quot;myTextInput&quot; /&gt;</span><br><span class="line">                &lt;input type=&quot;button&quot; value=&quot;Focus the text input&quot; onClick=&#123;this.handleClick&#125; /&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">ReactDOM.render(</span><br><span class="line">    &lt;HelloMessage name=&quot;join&quot; /&gt;,</span><br><span class="line">    document.getElementById(&quot;example&quot;)</span><br><span class="line">)</span><br></pre></td></tr></table></figure>
<p>给input加一个ref属性，方法中通过访问this.refs.ref名称来获取dom节点。</p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
      

      
      <div class="clearfix"></div>
    </div>
      
    
  </div>
  
</article>







  
    <article id="post-React 点击事件怎么传参" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/React 点击事件怎么传参/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/07/07/React 点击事件怎么传参/">
        React 点击事件怎么传参
        
      </a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>先看一下代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"> React.Children.map(this.state.hours,function(item,index)&#123;</span><br><span class="line">    return &lt;li key=&#123;index&#125; index=&#123;index&#125; onClick=&#123;this.clickItem.bind(this,index)&#125;&gt;&#123;item&#125;&lt;/li&gt;</span><br><span class="line">&#125;.bind(this))</span><br></pre></td></tr></table></figure>
<h4 id="map里的函数为什么要执行-bind-this"><a href="#map里的函数为什么要执行-bind-this" class="headerlink" title="map里的函数为什么要执行 bind(this)?"></a>map里的函数为什么要执行 bind(this)?</h4><p>因为这个函数的this是指向window的，要把当前作用域传入，是this指向React的this。</p>
<h4 id="onClick-this-clickItem-index-这样写会怎么样？"><a href="#onClick-this-clickItem-index-这样写会怎么样？" class="headerlink" title="onClick={this.clickItem(index)} 这样写会怎么样？"></a>onClick={this.clickItem(index)} 这样写会怎么样？</h4><p>会在加载的时候执行。点击的时候并不执行。</p>
<h4 id="如何才能正确的传入参数呢？"><a href="#如何才能正确的传入参数呢？" class="headerlink" title="如何才能正确的传入参数呢？"></a>如何才能正确的传入参数呢？</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;li key=&#123;index&#125; index=&#123;index&#125; onClick=&#123;this.clickItem.bind(this,index)&#125;&gt;&#123;item&#125;&lt;/li&gt;</span><br></pre></td></tr></table></figure>
<p>把参数通过bind函数传进去。</p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
      

      
      <div class="clearfix"></div>
    </div>
      
    
  </div>
  
</article>







  
    <article id="post-React 路由" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/React 路由/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/07/07/React 路由/">
        React 路由
        
      </a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><a href="http://reacttraining.cn/" target="_blank" rel="noopener">react-router-dom</a> 的使用方法</p>
<ol>
<li><p>先安装 react-router-dom<br>在index.html 的目录下执行以下命令：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install react-router-dom -D</span><br></pre></td></tr></table></figure>
</li>
<li><p>导出路由配置</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">import React from &quot;react&quot;;</span><br><span class="line">import createBrowserHistory from &apos;history/createBrowserHistory&apos;</span><br><span class="line">import &#123;</span><br><span class="line">  BrowserRouter as Router,</span><br><span class="line">  Route,</span><br><span class="line">  Link</span><br><span class="line">&#125; from &apos;react-router-dom&apos;</span><br><span class="line"></span><br><span class="line">const BasicExample = () =&gt; (</span><br><span class="line">  &lt;Router&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;ul&gt;</span><br><span class="line">        &lt;li&gt;&lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;Link to=&quot;/topics&quot;&gt;Topics&lt;/Link&gt;&lt;/li&gt;</span><br><span class="line">      &lt;/ul&gt;</span><br><span class="line"></span><br><span class="line">      &lt;hr/&gt;</span><br><span class="line"></span><br><span class="line">      &lt;Route exact path=&quot;/&quot; component=&#123;Home&#125;/&gt;</span><br><span class="line">      &lt;Route path=&quot;/about&quot; component=&#123;About&#125;/&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/Router&gt;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">const Home = () =&gt; (</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h2&gt;Home&lt;/h2&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">const About = () =&gt; (</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h2&gt;About&lt;/h2&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">export default BasicExample</span><br></pre></td></tr></table></figure>
</li>
<li><p>使用路由</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">import React from &apos;react&apos;;</span><br><span class="line">import ReactDOM from &apos;react-dom&apos;;</span><br><span class="line">import &apos;./index.css&apos;;</span><br><span class="line">import BasicExample from &quot;./router&quot; </span><br><span class="line">import registerServiceWorker from &apos;./registerServiceWorker&apos;;</span><br><span class="line">import Home from &quot;./components/home&quot;</span><br><span class="line">ReactDOM.render(&lt;BasicExample /&gt;, document.getElementById(&apos;root&apos;));</span><br><span class="line">registerServiceWorker();</span><br></pre></td></tr></table></figure></li>
</ol>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
      

      
      <div class="clearfix"></div>
    </div>
      
    
  </div>
  
</article>







  
    <article id="post-React-router_config的用法" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/React-router_config的用法/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/07/07/React-router_config的用法/">
        React-router config 的用法
        
      </a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>React有好几种路由嵌套的用法。感觉都不好用。终于我找到已一个React Router Config 的方法<br>官方例子如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre></td><td class="code"><pre><span class="line">import React from &apos;react&apos;;</span><br><span class="line">import ReactDom from &apos;react-dom&apos;;</span><br><span class="line">import &#123;</span><br><span class="line">    BrowserRouter as Router,</span><br><span class="line">    Route,</span><br><span class="line">    Link</span><br><span class="line">&#125; from &apos;react-router-dom&apos;</span><br><span class="line"></span><br><span class="line">const Main = () =&gt; &lt;h2&gt;Main&lt;/h2&gt;</span><br><span class="line">const Sandwiches = () =&gt; &lt;h2&gt;Sandwiches&lt;/h2&gt;</span><br><span class="line"></span><br><span class="line">const Tacos = (&#123; routes &#125;) =&gt; (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;h2&gt;Tacos&lt;/h2&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">            &lt;li&gt;&lt;Link to=&quot;/tacos/bus&quot;&gt;Bus&lt;/Link&gt;&lt;/li&gt;</span><br><span class="line">            &lt;li&gt;&lt;Link to=&quot;/tacos/cart&quot;&gt;Cart&lt;/Link&gt;&lt;/li&gt;</span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line"></span><br><span class="line">        &#123;routes.map((route, i) =&gt; (</span><br><span class="line">            &lt;RouteWithSubRoutes key=&#123;i&#125; &#123;...route&#125; /&gt;</span><br><span class="line">        ))&#125;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">const Bus = () =&gt; &lt;h3&gt;Bus&lt;/h3&gt;</span><br><span class="line">const Cart = () =&gt; &lt;h3&gt;Cart&lt;/h3&gt;</span><br><span class="line"></span><br><span class="line">const routes = [</span><br><span class="line">    &#123;</span><br><span class="line">        path: &apos;/sandwiches&apos;,</span><br><span class="line">        component: Sandwiches</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        path: &apos;/tacos&apos;,</span><br><span class="line">        component: Tacos,</span><br><span class="line">        routes: [</span><br><span class="line">            &#123;</span><br><span class="line">                path: &apos;/tacos/bus&apos;,</span><br><span class="line">                component: Bus</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">                path: &apos;/tacos/cart&apos;,</span><br><span class="line">                component: Cart</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line">const RouteWithSubRoutes = (route) =&gt; (</span><br><span class="line">    &lt;Route path=&#123;route.path&#125; render=&#123;props =&gt; (</span><br><span class="line">        // pass the sub-routes down to keep nesting</span><br><span class="line">        &lt;route.component &#123;...props&#125; routes=&#123;route.routes&#125; /&gt;</span><br><span class="line">    )&#125; /&gt;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">const RouteConfigExample = () =&gt; (</span><br><span class="line">    &lt;Router&gt;</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">            &lt;ul&gt;</span><br><span class="line">                &lt;li&gt;&lt;Link to=&quot;/tacos&quot;&gt;Tacos&lt;/Link&gt;&lt;/li&gt;</span><br><span class="line">                &lt;li&gt;&lt;Link to=&quot;/sandwiches&quot;&gt;Sandwiches&lt;/Link&gt;&lt;/li&gt;</span><br><span class="line">            &lt;/ul&gt;</span><br><span class="line"></span><br><span class="line">            &#123;routes.map((route, i) =&gt; (</span><br><span class="line">                &lt;RouteWithSubRoutes key=&#123;i&#125; &#123;...route&#125; /&gt;</span><br><span class="line">            ))&#125;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/Router&gt;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">export default RouteConfigExample;</span><br></pre></td></tr></table></figure></p>
<p>主要思想是：把配置的页面配置到一个叫 routes 的变量里。模式是 path和component 对应的。</p>
<p>RouteWithSubRoutes 的作用是循环遍历 routes 函数，将对应的组件渲染到对应的位置里。</p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
      

      
      <div class="clearfix"></div>
    </div>
      
    
  </div>
  
</article>







  
    <article id="post-React.children" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/React.children/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/07/07/React.children/">
        React.children
        
      </a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>React.children.map<br>使用方法：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">React.Children.map(this.props.children, function (child) &#123;</span><br><span class="line">    return &lt;li&gt;&#123;child&#125;&lt;/li&gt;;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<p>其他方法<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">this.props.children.forEach(function (child) &#123;</span><br><span class="line">    return &lt;li&gt;&#123;child&#125;&lt;/li&gt;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<p>在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向 上下文。如果 children 是一个内嵌的对象或者数组，它将被遍历：不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。</p>
<p>这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。</p>
<p>React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。</p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
      

      
      <div class="clearfix"></div>
    </div>
      
    
  </div>
  
</article>







  
    <article id="post-React里面如何使用jQuery 和 jQuery 的插件" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/React里面如何使用jQuery 和 jQuery 的插件/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/07/07/React里面如何使用jQuery 和 jQuery 的插件/">
        React 里面如何使用jQuery 和 jQuery 的插件
        
      </a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>如果直接 import $ from ‘./jquery.min’ 引入的话，会报错。<br>webpack 下使用jQuery ，要先安装。<br>在index.js 的目录下，执行以下命令：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install jquery -D</span><br></pre></td></tr></table></figure></p>
<p>在js里引入jquery<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import $ from &apos;jquery&apos;</span><br></pre></td></tr></table></figure></p>
<p>在webpack react项目里怎么使用jQuery的插件？</p>
<p>修改组建源码，将方法暴露出去。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">function reflection($) &#123;</span><br><span class="line"></span><br><span class="line">	$.fn.reflect = function(options) &#123;</span><br><span class="line">		options = $.extend(&#123;</span><br><span class="line">			height: 1/3,</span><br><span class="line">			opacity: 0.5</span><br><span class="line">		&#125;, options);</span><br><span class="line"></span><br><span class="line">		return this.unreflect().each(function() &#123;</span><br></pre></td></tr></table></figure></p>
<p>将方法暴露出去</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">	$.fn.unreflect = function() &#123;</span><br><span class="line">		return this.unbind(&quot;load&quot;).each(function() &#123;</span><br><span class="line">			var img = this, reflected = $(this).data(&quot;reflected&quot;), wrapper;</span><br><span class="line"></span><br><span class="line">			if (reflected !== undefined) &#123;</span><br><span class="line">				wrapper = img.parentNode;</span><br><span class="line">				img.className = wrapper.className;</span><br><span class="line">				img.style.cssText = reflected;</span><br><span class="line">				$(img).data(&quot;reflected&quot;, null);</span><br><span class="line">				wrapper.parentNode.replaceChild(img, wrapper);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;);</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">export default reflection;</span><br></pre></td></tr></table></figure>
<p>在js中引用<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">import $ from &apos;jquery&apos;;</span><br><span class="line">import cloud9carousel from &apos;./../js/jquery.cloud9carousel&apos;;</span><br><span class="line">import reflection from &apos;./../js/jquery.reflection&apos;;</span><br><span class="line">//初始化组件</span><br><span class="line">cloud9carousel($);</span><br><span class="line">reflection($);</span><br></pre></td></tr></table></figure></p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
      

      
      <div class="clearfix"></div>
    </div>
      
    
  </div>
  
</article>







  
    <article id="post-TypeScript-变量、基本类型和运算符" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/TypeScript-变量、基本类型和运算符/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/07/07/TypeScript-变量、基本类型和运算符/">
        TypeScript-变量、基本类型和运算符
        
      </a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>基本类型    </p>
<p> 基本类型有<code>boolean</code>、<code>number</code>、<code>string</code>、<code>array</code>、<code>void</code>。所有类型在<code>TypeScript</code>中，都是一个唯一的顶层的<code>Any Type</code> 类型的自类型。<code>any</code>关键字代表这种类型。</p>
<table>
<thead>
<tr>
<th>类型</th>
<th style="text-align:center">声明方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>boolean</td>
<td style="text-align:center">var isDone:boolean=false</td>
</tr>
<tr>
<td>number</td>
<td style="text-align:center">var height = 6;</td>
</tr>
<tr>
<td>string</td>
<td style="text-align:center">var name:string=”bob</td>
</tr>
<tr>
<td>array</td>
<td style="text-align:center">var list:number[]=[1,2,3]</td>
</tr>
<tr>
<td>enum</td>
<td style="text-align:center">enum Color {Red,Green,Blue}</td>
</tr>
<tr>
<td>any</td>
<td style="text-align:center">var notsure:any = 4;notsure = “maybe a string instaed”; notsure = false;</td>
</tr>
</tbody>
</table>
<p>在TypeScript中，我们不能把null或undefind当作类型使用。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var testVar : null;//错误，类型错误</span><br><span class="line">var testVar : undefined;//错误，找不到undefined</span><br></pre></td></tr></table></figure></p>
<p><code>var</code>、<code>let</code>和<code>const</code></p>
<p>在TypeScript中，当声明一个变量时，可以使用var、let和const关键字<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var mynum = 1;</span><br><span class="line">let isValid:boolean = true;</span><br><span class="line">const PI : number = 3.141592654;</span><br></pre></td></tr></table></figure></p>
<p>联合类型<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var path :string[]|string;</span><br><span class="line">path  = &apos;/temp/log.xml&apos;;</span><br><span class="line">path = [&apos;/temp/log.xml&apos;,&apos;/temp/error.xml&apos;];</span><br></pre></td></tr></table></figure></p>
<p>类型别名</p>
<p><code>TypeScript</code>允许用<code>type</code>关键字声明类型别名<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">type PrimitiveArray = Array&lt;string|number|boolean&gt;;</span><br><span class="line">type MyNumber = numbe;</span><br><span class="line">type NgScope = ng.IScope;</span><br><span class="line">type Callback = () =&gt; void;</span><br></pre></td></tr></table></figure></p>
<p>函数</p>
<p>1.具名函数<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function greet(name?:string):string&#123;</span><br><span class="line"> if(name)&#123;</span><br><span class="line">  return &quot;Hi,&quot; + name;</span><br><span class="line"> &#125;else&#123;</span><br><span class="line">  return &quot;Hi!&quot;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>2.匿名函数<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var greet:(name?:string) =&gt; :string = function(name:string):string&#123;</span><br><span class="line">if(name)&#123;</span><br><span class="line">  return &quot;Hi,&quot; + name;</span><br><span class="line"> &#125;else&#123;</span><br><span class="line">  return &quot;Hi!&quot;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>类<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">class Character&#123;</span><br><span class="line">  fullname:string;</span><br><span class="line">  constructor(firstname:string,lastname:string)&#123;</span><br><span class="line">    this.fullname = firstname + &quot;  &quot; + lastname;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"> greet(name?:string)&#123;</span><br><span class="line">   if(name)&#123;</span><br><span class="line">     return &quot;Hi!&quot; + name + &quot;!my name is &quot;  + this.fullnamel;</span><br><span class="line">    &#125;else&#123;</span><br><span class="line">     return &quot;Hi! my name is &quot; + this fullname ;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">var spark = new Character(&quot;Jacob&quot;,&quot;Keyes&quot;);</span><br><span class="line">var msg = spark.greet();//&quot;Hi! my name is Jocob Keyes&quot;;</span><br><span class="line">var msg1 = spark.greet(&quot;Dr. Halsey&quot;);//&quot;Hi!Dr. Hasey! my name is Jacob Keyes&quot;</span><br></pre></td></tr></table></figure></p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
      

      
      <div class="clearfix"></div>
    </div>
      
    
  </div>
  
</article>







  
    <article id="post-VScode 设置" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/VScode 设置/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/07/07/VScode 设置/">
        VScode 设置
        
      </a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;terminal.integrated.shell.windows&quot;: &quot;C:\\Windows\\System32\\cmd.exe&quot;,</span><br><span class="line">    &quot;files.autoSave&quot;: &quot;onWindowChange&quot;,</span><br><span class="line">    &quot;workbench.iconTheme&quot;: &quot;material-icon-theme&quot;,</span><br><span class="line">    &quot;editor.tabSize&quot;: 4,</span><br><span class="line">    &quot;emmet.triggerExpansionOnTab&quot;: true,</span><br><span class="line">    &quot;emmet.showExpandedAbbreviation&quot;: &quot;inMarkupAndStylesheetFilesOnly&quot;,</span><br><span class="line">    &quot;emmet.includeLanguages&quot;: &#123;</span><br><span class="line">    &quot;vue-html&quot;: &quot;html&quot;,</span><br><span class="line">    &quot;vue&quot;: &quot;html&quot;,</span><br><span class="line">    &quot;wxml&quot;: &quot;html&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;emmet.syntaxProfiles&quot;: &#123;</span><br><span class="line">    &quot;javascript&quot;: &quot;jsx&quot;,</span><br><span class="line">    &quot;vue&quot;: &quot;html&quot;,</span><br><span class="line">    &quot;vue-html&quot;: &quot;html&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;files.associations&quot;: &#123;</span><br><span class="line">    &quot;*.wxml&quot;: &quot;wxml&quot;,</span><br><span class="line">    &quot;*.wxss&quot;: &quot;css&quot;,</span><br><span class="line">    &quot;*.wxs&quot;: &quot;javascript&quot;,</span><br><span class="line">    &quot;*.wpy&quot;: &quot;html&quot;,</span><br><span class="line">    &quot;*.vue&quot;: &quot;vue&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;minapp-vscode.disableAutoConfig&quot;: true,</span><br><span class="line">    &quot;minapp-vscode.wxmlQuoteStyle&quot;: &quot;&apos;&quot;,</span><br><span class="line">    &quot;emmet.optimizeStylesheetParsing&quot;: false,</span><br><span class="line">    &quot;eslint.autoFixOnSave&quot;: true,</span><br><span class="line">    &quot;eslint.options&quot;: &#123;</span><br><span class="line">    &quot;extensions&quot;: [</span><br><span class="line">    &quot;.js&quot;,</span><br><span class="line">    &quot;.vue&quot;</span><br><span class="line">    ]</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;eslint.validate&quot;: [</span><br><span class="line">    &quot;javascript&quot;,&#123;</span><br><span class="line">    &quot;language&quot;: &quot;vue&quot;,</span><br><span class="line">    &quot;autoFix&quot;: true</span><br><span class="line">    &#125;,&quot;html&quot;,&quot;vue&quot;</span><br><span class="line">    ],</span><br><span class="line">    &quot;search.exclude&quot;: &#123;</span><br><span class="line">    &quot;**/node_modules&quot;: true,</span><br><span class="line">    &quot;**/bower_components&quot;: true,</span><br><span class="line">    &quot;**/dist&quot;: true</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;window.zoomLevel&quot;: 0</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      
    </div>
    
    <div class="article-info article-info-index">
      
      
      

      
      <div class="clearfix"></div>
    </div>
      
    
  </div>
  
</article>







  
    <article id="post-css流布局" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/css流布局/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/07/07/css流布局/">
        css流布局
        
      </a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>css可以利用 ==collumn-count== 属性实现瀑布流流布局<br>例子代码如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">	&lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;瀑布流测试&lt;/title&gt;</span><br><span class="line">	&lt;style&gt;</span><br><span class="line">		.water-fall&#123;</span><br><span class="line">			width: 1200px;</span><br><span class="line">			height: auto;</span><br><span class="line">			margin: 0 auto;</span><br><span class="line">			column-count: 4;</span><br><span class="line">			-webkit-column-count:4;</span><br><span class="line"></span><br><span class="line">		&#125;</span><br><span class="line">		.water-fall .item&#123;	</span><br><span class="line">			box-sizing: border-box;</span><br><span class="line">			border: #ccc 1px solid;</span><br><span class="line">			padding: 5px;</span><br><span class="line">			margin-top: 10px;</span><br><span class="line">		&#125;</span><br><span class="line">		.water-fall .item:nth-child(4n+1)&#123;</span><br><span class="line">			background-color: #4e0f0f;</span><br><span class="line">		&#125;</span><br><span class="line">		.water-fall .item:nth-child(4n+2)&#123;</span><br><span class="line">			background-color: #2cc468;</span><br><span class="line">		&#125;</span><br><span class="line">		.water-fall .item:nth-child(4n+3)&#123;</span><br><span class="line">			background-color: #c49c2c;</span><br><span class="line">		&#125;</span><br><span class="line">		.water-fall .item:nth-child(4n)&#123;</span><br><span class="line">			background-color: #c42cbf;</span><br><span class="line">		&#125;</span><br><span class="line">	&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;div class=&quot;water-fall&quot;&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Lorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sitLorem ipsum dolor sit.&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum,Iste quas nostrum, corrupti.&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Voluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, doloreVoluptas dolor, dolore minima!&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Amet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciuntAmet, et nesciunt recusandae!&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Assumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimusAssumenda vitae omnis possimus.&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Voluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optioVoluptas quis dolores optio?&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Voluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniamVoluptatibus esse beatae veniam.&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Nihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibusNihil tempora beatae voluptatibus.&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Eveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquamEveniet adipisci, quisquam sed.&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Totam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobisTotam eaque quos nobis.&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Praesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cumPraesentium vero corrupti cum?&lt;/div&gt;</span><br><span class="line">		&lt;div class=&quot;item&quot;&gt;Error odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt temporeError odio sunt tempore.&lt;/div&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure></p>
<p>只要在外面的div的属性里加上一个属性：collumn-count、-webkit-collumn-count，然后置顶一个值，是这一列显示的列数。</p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
      

      
      <div class="clearfix"></div>
    </div>
      
    
  </div>
  
</article>







  
    <article id="post-axios获取图片，后台返回文件流怎么处理" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/07/07/axios获取图片，后台返回文件流怎么处理/" class="article-date">
  	<time datetime="2020-07-07T05:00:13.000Z" itemprop="datePublished">2020-07-07</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2020/07/07/axios获取图片，后台返回文件流怎么处理/">
        axios获取图片，后台返回文件流怎么处理
        
      </a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <h4 id="今天调一个返回图片的接口，图片是以文件流的格式返回的。"><a href="#今天调一个返回图片的接口，图片是以文件流的格式返回的。" class="headerlink" title="今天调一个返回图片的接口，图片是以文件流的格式返回的。"></a>今天调一个返回图片的接口，图片是以文件流的格式返回的。</h4><h5 id="如何才能正确的显示图片呢？"><a href="#如何才能正确的显示图片呢？" class="headerlink" title="如何才能正确的显示图片呢？"></a>如何才能正确的显示图片呢？</h5><h4 id="1-请求时在header设置返回类型。指定返回类型为-blob"><a href="#1-请求时在header设置返回类型。指定返回类型为-blob" class="headerlink" title="1. 请求时在header设置返回类型。指定返回类型为 ==blob=="></a>1. 请求时在header设置返回类型。指定返回类型为 ==blob==</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">/**</span><br><span class="line"> * </span><br><span class="line"> * @param &#123;tai&#125; string 生成订阅号海报</span><br><span class="line"> */</span><br><span class="line">static getSubscriptionPicture (&#123;</span><br><span class="line">  tai</span><br><span class="line">&#125;: &#123;tai: string&#125;) &#123;</span><br><span class="line">  return http.post(&#123;</span><br><span class="line">    url: this.subscription,</span><br><span class="line">    data: &#123;&#125;,</span><br><span class="line">    config: &#123;</span><br><span class="line">      requiresAuth: true,</span><br><span class="line">      params: &#123;</span><br><span class="line">        tai</span><br><span class="line">      &#125;,</span><br><span class="line">      responseType: &apos;blob&apos;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="2-使用原生js自带的-URL-createObjectURL-函数。"><a href="#2-使用原生js自带的-URL-createObjectURL-函数。" class="headerlink" title="2. 使用原生js自带的 ==URL.createObjectURL== 函数。"></a>2. 使用原生js自带的 ==URL.createObjectURL== 函数。</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">this.card = URL.createObjectURL(res.data)</span><br></pre></td></tr></table></figure>
<h5 id="这样将-this-card-放在img的src上面就行了"><a href="#这样将-this-card-放在img的src上面就行了" class="headerlink" title="这样将==this.card==放在img的src上面就行了"></a>这样将==this.card==放在img的src上面就行了</h5>
      
    </div>
    
    <div class="article-info article-info-index">
      
      
      

      
      <div class="clearfix"></div>
    </div>
      
    
  </div>
  
</article>







  
  
    <nav id="page-nav">
      <a class="extend prev" rel="prev" href="/">&laquo; Prev</a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><a class="page-number" href="/page/5/">5</a><a class="extend next" rel="next" href="/page/3/">Next &raquo;</a>
    </nav>
  
</div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
      <div class="footer-left">
        &copy; 2022 sunJsona
      </div>
        <div class="footer-right">
          <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/smackgg/hexo-theme-smackdown" target="_blank">Smackdown</a>
        </div>
    </div>
  </div>
</footer>
    </div>
    
  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">


<script>
	var yiliaConfig = {
		fancybox: true,
		mathjax: true,
		animate: true,
		isHome: true,
		isPost: false,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false
	}
</script>
<script src="/js/main.js"></script>



<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js"></script>


  </div>
</body>
</html>